<template>
  <div class="myorder">
    <div class="van-nav-bar">
      <div class="van-nav-bar-left"
           @click="back ">
        <van-icon size="16"
                  name="arrow-left"
                  color="#FFF" />返回
      </div>
      <div class="van-nav-bar-title">我的订单</div>
    </div>

    <div class="banner">
      <img class="auto-img"
           src="../assets/ruixing_a.png"
           alt="">
    </div>

    <div class="tabs">
      <van-tabs v-model="active"
                swipeable
                animated
                color="#0C34BA"
                line-height="2"
                @change="toggleTab">
        <van-tab v-for="(item,index) in tabsData"
                 :title="item.title"
                 :key="index">

          <div class="orderInformation"
               v-for="(item1,index1) in orderData"
               :key="index1">

            <div class="Information">订单信息</div>

            <div class="order">
              <div class="EdNo">订单编号：{{item1.oid}}</div>
              <div class="order-item">
                <div v-if="item1.product[0].status == 1"
                     @click="confirm(item1,index1)">确认收货</div>

                <div class="item-box"
                     v-else>
                  <div class="completed">已完成</div>
                  <div class="delete-item"
                       @click="removeOrder (item1.oid, index1)">
                    <van-icon name="delete-o" />
                  </div>

                </div>
              </div>
            </div>

            <div class="Information-item"
                 v-for="(item2,index2) in item1.product"
                 :key="index2">

              <div class="Information-img">
                <img class="auto-img"
                     :src="item2.small_img"
                     alt="">
              </div>

              <div class="CommodityContent">
                <div class="Content">
                  <div class="Content-title">
                    <div class="Content-cnname">{{item2.name}}</div>
                    <div class="Content-enname">{{item2.enname}}</div>
                  </div>
                  <div class="Content-spec">{{item2.rule}}</div>
                </div>

                <div class="Content-price">
                  <div class="price">&yen;{{item2.price}}</div>
                  <div class="price-count">x{{item2.count}}</div>
                </div>
              </div>

            </div>

            <div class="total-item">

              <div class="order-total">
                <div class="time">{{item1.time}}</div>

                <div class="order-count">共计：{{item1.count}}件商品</div>
                <div class="order-money">合计金额：<span>&yen;{{item1.total}}</span></div>

                <div class="left-circle circle"></div>
                <div class="right-circle circle"></div>
              </div>

              <!-- <button class="order-btn"
                      @click="getAnotherList">再来一单</button> -->
            </div>

          </div>
        </van-tab>

      </van-tabs>
    </div>
    <div v-if="orderData.length == 0">
      <van-empty description="没有订单数据！" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyOrder',
  data () {
    return {
      // 激活下标,0 = 全部,1 = 进行中,2 = 已完成
      active: 0,

      // 商品数量
      count: 0,

      // 商品总价
      total: 0,

      // 导航栏内容
      tabsData: [
        {
          title: '全部'
        },
        {
          title: '进行中'
        },
        {
          title: '已完成'
        }
      ],

      // 订单内容
      orderData: [],

      SpecificationData: [],

      count: 1,
      pid: '',
    }
  },

  created () {
    this.getMyOrderData();
  },

  methods: {
    back () {
      //返回上一级
      this.$router.push({ name: 'My' });

    },

    // 获取我的订单
    getMyOrderData () {
      this.axios({
        method: 'get',
        url: '/findOrder',
        params: {
          // status订单状态
          status: this.active
        }
      }).then(result => {

        if (result.data.code == 70000) {

          let orderNo = []
          result.data.result.forEach(ele => {
            ele.small_img = ele.smallImg;

            if (orderNo.indexOf(ele.oid) == - 1) {
              orderNo.push(ele.oid)
            }
          });

          let orderData = []
          orderNo.forEach(Element => {

            let CurrentOrder = {
              oid: Element,
              product: [],
              count: 0,
              total: 0,
            }

            result.data.result.forEach(value => {
              let datea = value.createdAt.split('T')[1].split('.')[0]
              let dateb = value.createdAt.split('T')[0]

              let date = dateb + ' ' + datea
              if (Element == value.oid) {

                CurrentOrder.status == value.status;

                CurrentOrder.data = value.createdAt

                CurrentOrder.time = date
                CurrentOrder.product.push(value);
                CurrentOrder.count += value.count
                CurrentOrder.total += value.count * value.price
              }
            })
            orderData.push(CurrentOrder);

          })
          this.orderData = orderData
        }

      })
    },

    //切换订单状态
    toggleTab () {

      this.getMyOrderData();
    },


    // 确定收货

    confirm (item, index) {
      this.$dialog.confirm({

        message: '商品是否到达？'

      }).then(() => {

        this.axios({
          method: 'post',
          url: '/receive',
          data: {
            oid: item.oid
          }
        }).then(result => {
          this.$toast.success('确定收货成功')

          if (result.data.code == 80000) {

            if (this.active == 1) {
              item.status = 2;
              this.orderData.splice(index, 1);
            }
          }
        })
      })
    },

    //删除订单
    removeOrder (oid, index) {
      this.$dialog.confirm({
        message: '是否确定删除该订单'
      }).then(() => {

        this.axios({
          method: 'post',
          url: '/removeOrder',
          data: {
            oid
          }
        }).then(result => {
          this.$toast.success('商品已删除')

          if (result.data.code == 90000) {
            this.orderData.splice(index, 1);
          }

        })
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.myorder {
  padding-top: 60px;
  .van-nav-bar {
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    padding-top: 30px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    background-color: #0c34ba;
    color: #fff;

    .van-nav-bar-title {
      margin-left: 115px;
      font-size: 16px;
    }
    .van-nav-bar-left {
      font-size: 16px;
    }
  }
  .van-popup--top {
    position: absolute;
    top: 100px;
  }
  .van-popup {
    position: absolute;
    top: 100px;
  }
  .van-notify {
    position: absolute;
    top: 100px;
  }
  .van-notify--success {
    position: absolute;
    top: 100px;
  }
  .banner {
    width: 100%;
    height: 180px;
  }
  .tabs {
    margin: -30px 10px 10px 10px;
  }
  .orderInformation {
    margin-top: 10px;
    padding: 10px;
    background-color: #fff;
    border-radius: 10px 10px 0 0;
    // 订单编号
    .order {
      display: flex;
      align-content: center;
      justify-content: space-between;
      font-size: 15px;
      .EdNo {
        color: #848484;
      }
      .order-item {
        display: flex;
        .item-box {
          display: flex;
          align-items: center;
          .completed {
            margin-right: 10px;
          }
        }
      }
    }
    .Information {
      font-size: 18px;
    }

    // 订单信息
    .Information-item {
      margin-top: 20px;
      align-items: center;
      display: flex;
      .Information-img {
        width: 70px;
        height: 70px;
        margin-right: 10px;
      }
      .CommodityContent {
        width: calc(100% - 80px);
        margin-bottom: 10px;
        &:last-child {
          margin-bottom: 0;
        }
        .Content {
          display: flex;
          .Content-title {
            margin-right: 20px;

            .Content-cnname {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              width: 100px;
            }
            .Content-enname {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              width: 100px;
            }
          }
          .Content-spec {
            margin-left: 20px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100px;
          }
        }
        .Content-price {
          margin-top: 20px;
          display: flex;
          justify-content: space-between;
          .price {
            font-size: 17px;
            color: #0c34ba;
            font-weight: bold;
          }
          .price-count {
            font-size: 16px;
          }
        }
      }
    }
    .total-item {
      margin-top: 30px;
      text-align: right;

      .order-btn {
        margin-top: 10px;
        background-color: #0c34ba;
        color: #fff;
        border-radius: 20px;
        padding: 5px 10px;
        border-style: none;
      }
      .order-total {
        border-top: 1px dashed #e8e8e8;
        font-size: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        padding-top: 20px;
        .time {
          color: #0c34ba;
        }
        .order-count {
          margin-left: 40px;
        }
        .order-money {
          span {
            font-size: 16px;
            color: #0c34ba;
            font-weight: bold;
          }
        }

        .circle {
          position: absolute;
          top: -10px;
          width: 20px;
          height: 20px;
          background-color: #e6e6e6;
          border-radius: 50%;
        }

        .left-circle {
          left: -20px;
        }
        .right-circle {
          right: -20px;
        }
      }
    }
  }
}
</style>